<template>
  <div class="city">
    <city-header></city-header>
    <city-list :hotCityList="hotCityList"
               :letterList="letterList"
               :cityList="cityList"></city-list>
  </div>
</template>
<script>
import cityHeader from "./pages/Header"
import cityList from "./pages/CityList"
export default {
  components: {
    cityHeader,
    cityList,
  },
  data () {
    return {
      hotCityList: [],
      letterList: [],
      cityList: [],
    }
  },
  mounted () {
    this.$http.get("/api/allCity.json")
      .then((res) => {
        const data = res.data;
        this.cityList = data.cityList;
        this.hotCityList = data.hotCityList;
      })
  },
}


</script>
<style scoped>
.city {
  background: rgb(244, 244, 244);
}
</style>